<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理员页面</title>
    <link rel="icon" th:href="@{/static/images/ico/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/adminlte.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/summernote-bs4.min.css}">
</head>
<body class="sidebar-mini layout-fixed" style="height: auto;">
<div class="wrapper animated fadeIn">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>邮件功能</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">博客后台</li>
                        <li class="breadcrumb-item active">邮件功能</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">新建邮件</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <input class="form-control" placeholder="发送至：">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="主题：">
                            </div>
                            <div class="form-group">
                                <div id="admin-email-edit"></div>
                            </div>
                            <div class="form-group">
                                <div class="btn btn-default btn-file">
                                    <i class="fas fa-paperclip"></i>附件
                                    <input type="file" name="attachment">
                                </div>
                                <p class="help-block">最大32MB</p>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="float-right">
                                <button type="button" class="btn btn-default"><i class="fas fa-pencil-alt"></i> 编辑
                                </button>
                                <button type="submit" class="btn btn-primary"><i class="far fa-envelope"></i> 发送
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
<script type="text/javascript" th:src="@{/static/js/adminlte.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/summernote-bs4.min.js}"></script>
<script type="text/javascript">
    $("#admin-email-edit").summernote({
        lang: 'zh-CN',// 语言
        placeholder: '请输入邮件内容', // 提示
        callbacks: { // 回调函数
            // 上传图片时使用的回调函数   因为我们input选择的本地图片是二进制图片，需要把二进制图片上传服务器，服务器再返回图片url，就需要用到callback这个回调函数
            onImageUpload: function (files) {
                var form = new FormData();
                form.append('myFileName', files[0]);  //myFileName 是上传的参数名，一定不能写错
                $.ajax({
                    type: "post",
                    url: "", //上传服务器地址
                    dataType: 'json',
                    data: form,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        console.log(data.data)
                        $('#summernote').summernote('editor.insertImage', data.data);
                    }
                })
            }
        }
    });
</script>
</html>